<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css">
  <link rel="stylesheet" href="/lib/public.css" media="all">
</head>
<body>


<div class="layuimini-container">
  <div class="layuimini-main">


    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>


  </div>
</div>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script >
  layui.use(['form', 'table','upload'], function () {
    var $ = layui.jquery,
            form = layui.form,
            upload = layui.upload,
            table = layui.table;

    let id = sessionStorage.getItem("id");
    table.render({
      elem: '#currentTableId',
      url: `/api/order/detail/${id}`,
      limits: [5, 10, 15, 20, 100],
      limit: 10,
      page: false,
      skin: 'line',
      defaultToolbar: ['filter', 'exports', 'print', {
        title: '提示',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
      }],
      response:{
        statusCode:10000
      },
      parseData: function(res){ //res 即为原始返回的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": res.data.total, //解析数据长度
          "data": res.data.list //解析数据列表
        };
      },
      cols: [[
        {field: 'goodsName', title: '商品名', templet:function (d) {
            if(d.goods.name){
              return d.goods.name;
            }else {
              return "";
            }

          } },
        {field: 'pic', title: '图片', templet:function (d) {
            let picArr = d.goods.picList;
            let str = "";
            for (let i=0 ; i<picArr.length; i++){
              str += `<img src="/upload/${picArr[i].url}" style="width: 30px; height: 30px;" />`
            }

            return str;
          }},
        {field: 'count',  title: '数量'},
        {field: 'price', title: '价格'},
        {field: 'goodsName', title: '版本', templet:function (d) {
            if(d.goods.color){
              return d.goods.color;
            }else {
              return "";
            }

          } },
        {field: 'goodsName', title: '颜色', templet:function (d) {
            if(d.goods.version){
              return d.goods.version;
            }else {
              return "";
            }

          } },
      ]],
    });

  });
</script>
</body>
</html>
